<template>
	<view class="content">

		<view class="login_from">
			<view class="img_avatar">
				<u-avatar :src="src" size="large" @click="updateImg">
				</u-avatar>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/user.png"></image>
				<view class="login_from_name">用户名</view>
				<view class="login_from_fun"><input type="text" v-model="username" :placeholder="username"></view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/nickname.png"></image>
				<view class="login_from_name">昵称</view>
				<view class="login_from_fun"><input type="nickname" v-model="nickname" :placeholder="nickname"></view>
			</view>

			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/sex.png"></image>
				<view class="login_from_name">性别</view>
				<view class="login_from_fun">
					<u-radio-group v-model="sexvalue" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in sex" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/building.png"></image>
				<view class="login_from_name">楼栋</view>
				<view class="login_from_fun">
					<u-input v-model="value" :type="type" :border="border" @click="loadData" />
					<u-select v-model="show" mode="mutil-column-auto" :list="buildlist" @confirm="confirm"></u-select>
				</view>
			</view>

		</view>

		<view class="login_from_dl">
			<button @click="submit">提交</button>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>


	</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				src: '/static/img/DEF1E133-1158-406D-A771-C7483BA89477.jpg',
				sexvalue: '',
				value: '',
				type: 'select',
				show: false,
				border: false,
				sex: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
					{
						name: '保密',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				sexvalue: 'orange',
				buildlist: [{
						value: 1,
						label: '如新小镇一单元',
						children: [{
								value: 1,
								label: '1_101',
							},
							{
								value: 2,
								label: '1_102',
							}
						]
					},
					{
						value: 2,
						label: '如新小镇一单元',
						children: [{
							value: 1,
							label: '1_102',

						}]
					}
				],

				username: '',
				password: '',
				telphone: '',
				nickname: '',
				build: '',
				room: '',
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				usersex: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.username = wx.getStorageSync("username");
			this.nickname = wx.getStorageSync("userNickname");
			this.sexvalue = wx.getStorageSync("usersex");
			if (this.sexvalue = '0') {
				this.sexvalue = '男';
			} else if (this.sexvalue = '1') {
				this.sexvalue = '女';
			} else if (this.sexvalue = '2') {
				this.sexvalue = '保密';
			}
			
			this.src = wx.getStorageSync("userAvatar");
		},
		methods: {

			updateImg() {
				uni.chooseImage({
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:9002/api/file/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								platform: 2,
								type: 1,

							},
							formData: {
								category: 3,
							},
							success: res => {
								console.log('上传成功', JSON.parse(res.data));
								if (JSON.parse(res.data).code == "200") {
									this.src = JSON.parse(res.data).data;
									this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
								}
								// 失败报错
								if (JSON.parse(res.data).code == "500") {
									this.$refs.uToast.show({
										title: '上传失败',
										type: 'failed',
									})
								}

							}
						});
					},
					fail: err => {
						this.$refs.uToast.show({
							title: '上传失败',
							type: 'failed',
						})
					}
				});
			},
			async loadData() {
				const res = await uni.$http.get('building/getAll');
				if (res.data.code == 200) {
					this.buildlist = res.data.data;
					this.show = true;
				} else {
					wx.showToast({
						icon: 'none',
						title: "数据加载失败"
					})
				}

			},
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				if (e == '男') {
					this.usersex = 0;
				} else if (e = '女') {
					this.usersex = 1;
				} else if (e = '保密') {
					this.usersex = 2;
				}
			},
			confirm(e) {
				console.log(e)
				var s = '';
				for (let i = 0; i < e.length; i++) {
					if (i < e.length - 1) {
						s += e[i].label + ' ';
					} else if (i = e.length - 1) {
						s += e[i].label;
					}
				}
				this.value = s;
				this.build = e[0].value;
				this.room = e[1].value;

			},
			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},

			async submit() {

				let params = {
					username: this.username,
					nickname: this.nickname,
					build: this.build,
					room: this.room,
					usersex: this.usersex,
					userAvatar: this.src
				};
				const res = await uni.$http.post('modifyUserInfo', params);
				if (res.data.code == "200") {
					wx.setStorageSync("username", this.username);
					wx.setStorageSync("userNickname", this.nickname);
					wx.setStorageSync("usersex", this.usersex);
					wx.setStorageSync("userAvatar", this.src);
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
					});
					uni.navigateBack({
						delta: 1 //返回层数，2则上上页
					});
				} else {
					this.$refs.uToast.show({
						title: '修改失败',
						type: 'failed',
					})
				}



			},

			// 所属地区选择 end
		},
	}
</script>

<style lang="scss">
	.img_avatar {
		margin-left: 270rpx;
	}

	.content {
		margin-top: 60rpx;
	}

	.img {
		width: 100%;
		height: 350rpx;
	}

	page {
		background: #fff;
	}

	.login_from_input image {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 50rpx 8%;
		align-items: center;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 70%;
		text-align: left;
		font-size: 27rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-top: 80rpx;
	}

	.login_from_dl button {
		width: 80%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.eye {
		margin-top: 5rpx;
		width: 55rpx;
		height: 55rpx;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
